<template>
  <div class="Index">
    <van-nav-bar
      title="手动添加"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    
      <template #right>
        <van-icon name="plus" size="22" />
      </template>
    </van-nav-bar>
    <van-search v-model="value" shape="round" placeholder="请输入设备的品牌型号等关键词" />
    <!-- <stepmain/> -->
    <div style="display: flex; flex-direction: row">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="item in sideData" :key="item" :title="item.title" >
          <template #left>
     
      </template>
        </van-sidebar-item>
      </van-sidebar>
      <div style="text-align: center" class="right-item">
        <van-grid :column-num="2">
          <van-grid-item icon="photo-o" text="灯（Wi-Fi）" />
          <van-grid-item icon="photo-o" text="灯（蓝牙+Wi-Fi）" />
          <van-grid-item icon="photo-o" text="开关（Wi-Fi）" />
          <van-grid-item icon="photo-o" text="开关（蓝牙+Wi-Fi）" />
          <van-grid-item icon="photo-o" text="插座（Wi-Fi）" />
          <van-grid-item icon="photo-o" text="插座（蓝牙+Wi-Fi）" />
          <van-grid-item icon="photo-o" text="三键开关（蓝牙+Wi-Fi）" />
          <van-grid-item icon="photo-o" text="窗帘（蓝牙+Wi-Fi）" />
        </van-grid>
      </div>
    </div>
    <van-loading
      v-if="load"
      style="text-align: center; margin-top: 40vh"
      type="spinner"
      size="10vw"
    />
    <router-view></router-view>
  </div>
</template>

<script>
import mqtt from "mqtt";
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);
export default {
  name: "App",
  components: {},
  activated: function () {
    // 在 keepAlive 被激活的时候，调用指定加载页面组件的方法
    // this.LoginCheck();
    console.log("Home-keepok");

    // console.log(this.$store.state.username)
  },
  data() {
    return {
      id: localStorage.getItem("setUserID"),
      load: true,
      panel: [],
      sideData: [{
        title:"电工照明"
      },
      {
        title:"环境电器"
      },
      {
        title:"厨卫电器"
      },
      {
        title:"家居安防"
      },
      {
        title:"生活电器"
      },
      {
        title:"运动健康"
      },
      {
        title:"网络设备"
      },
      {
        title:"娱乐影音"
      },
      {
        title:"其他"
      }
      ]
    };
  },
  created: function () {
    this.updateDevice();
    this.load = true;
    // this.mqttMsg()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight(){
      this.$router.push({
        name: "scanqrcode",
        params: {
          routerType: "push",
        },
      });
    },
    exit() {
      localStorage.setItem("islogin", 0);
      this.$router.go(0);
      console.log("ok");
    },
    onAddDevice() {
      this.$router.push({
        name: "addDevice",
        params: {
          routerType: "push",
        },
      });
    },
    updateDevice() {
      this.$http
        .get("http://121.5.58.100:8000/queryDeviceList", {
          params: {
            userid: localStorage.getItem("setUserID"),
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          this.load = false;
          console.log(result.data);
          this.panel = result.data;
          // let code = result.data.code;
          // let gpsData = result.data.data;
          // this.loadState = false;
          // if (code !== 200 || gpsData === "" || gpsData === null) {
          // this.initMap();
          // this.initMap();
          // this.initPage(result.path);
          //     return
          // }
        });
    },
    mqttMsg() {
      client.on("connect", () => {
        console.log("连接成功！！！");
        client.subscribe("wsn/info", { qos: 0 }, (error) => {
          if (!error) {
            console.log("订阅成功");
          } else {
            console.log("订阅失败");
          }
        });
      });
    },
  },
};
</script>

<style>
.Index {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column;
  position: absolute;
  background: white;
}
.text {
  color: white;
  text-align: left;
  margin-left: 5vw;
  margin-bottom: 10vw;
}
.right-item {
  /* padding: 20px; */
  /* height: 100%; */
  width: calc(100vw - 80px);
}
</style>
